const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development', // 模式,常见的是development和production
  entry: './src/index.js', // 入口文件
  output: {
    // 出口文件
    publicPath: '/', // 给全部的静态资源前面加上一个前缀
    filename: 'build.[hash:8].js', // 文件名
    path: path.resolve(__dirname, 'dist'), // 文件目录
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8000,
    compress: true,
    open: false,
  },
  plugins: [
    new CleanWebpackPlugin(), // 清空打包后的dist文件夹
    new webpack.HotModuleReplacementPlugin(), // 热更新处理
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'webpack学习',
      inject: 'head',
      meta: {
        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
      },
      hash: true,
      cache: true,
    }),
  ],
};
